import React from 'react';
import { findDOMNode } from 'react-dom';
import TweenOne from 'rc-tween-one';
import Linking from 'umi/link';
import { Link } from 'rc-scroll-anim';

import styles from './style.less';

const LOGO = require('../../assets/LOGO@2x.png');
const QRCODE = require('../../assets/qrcode.jpg');

const dataSource = {
  isScrollLink: true,
  wrapper: {
    className:
      'nav home-page-wrapper nav home-page-wrapper jnu03e5hwa6-editor_css',
  },
  page: { className: 'home-page home-page home-page jnu03sdxtga-editor_css' },
  logo: {
    className: 'nav-logo',
    children: LOGO,
  },
  Menu: {
    className: 'nav-menu',
    children: [
      // {
      //   name: 'banner',
      //   to: 'home',
      //   children: '合作方式',
      //   className: 'menu-item',
      //   target: 'seft'
      // },
      {
        name: 'about',
        to: 'about',
        children: '关于我们',
        className: 'menu-item',
      },
    ],
  },
  mobileMenu: { className: 'nav-mobile-menu' },
  menuLink: {
    children: [
      {
        name: 'banner',
        to: 'banner',
        children: (
          <span>
            <p>滴滴网约车主招募</p>
          </span>
        ),
        className: 'menu-item active-editor_css',
      },
      {
        name: 'page1',
        to: 'page1',
        children: (
          <span>
            <p>为什么选我们</p>
          </span>
        ),
        className: 'menu-item active-editor_css',
      },
      {
        name: 'page2',
        to: 'page2',
        children: (
          <span>
            <p>我们目前的合作方式</p>
          </span>
        ),
        className: 'menu-item',
      },
      {
        name: 'page3',
        to: 'page3',
        children: (
          <span>
            <p>在成为我们的合作伙伴之前，您需要认真考虑以下需求</p>
          </span>
        ),
        className: 'menu-item',
      },
      {
        name: 'page4',
        to: 'page4',
        children: (
          <span>
            <p>加入我们的流程</p>
          </span>
        ),
        className: 'menu-item',
      },
      {
        name: 'page5',
        to: 'page5',
        children: (
          <span>
            <p>我们努力提供一种有质感的生活方式，而不是一份有收入的职业。</p>
          </span>
        ),
        className: 'menu-item',
      },
      {
        name: 'page6',
        to: 'page6',
        children: (
          <span>
            <p>一个专属网约车车主的社区</p>
          </span>
        ),
        className: 'menu-item',
      },
    ],
  },
};

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneOpen: false,
      menuHeight: 0,
    };
  }

  phoneClick = () => {
    const menu = findDOMNode(this.menu);
    const phoneOpen = !this.state.phoneOpen;
    this.setState({
      phoneOpen,
      menuHeight: phoneOpen ? menu.scrollHeight : 0,
    });
  };

  render() {
    const { ...props } = this.props;
    // const { dataSource, isMobile } = props;
    const { isMobile } = props;
    delete props.dataSource;
    delete props.isMobile;
    const { menuHeight, phoneOpen } = this.state;
    const navData = dataSource.Menu.children;
    const navChildren = Object.keys(navData).map((key, i) => (
      navData[key].target ?
      <Link key={i.toString()} {...navData[key]}>
        {navData[key].children}
      </Link>
      :
      <Linking key={i.toString()} {...navData[key]}>
        {navData[key].children}
      </Linking>
    ));
    return (
      <TweenOne
        component="header"
        animation={{ opacity: 0, type: 'from' }}
        {...dataSource.wrapper}
        {...props}
        style={{overflow: 'initial'}}
      >
        <div
          {...dataSource.page}
          className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
        >
          <TweenOne
            animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
            {...dataSource.logo}
          >
            <Linking to="/home">
              <img width="100%" src={dataSource.logo.children} alt="img" />
            </Linking>
          </TweenOne>
          {isMobile && (
            <div
              {...dataSource.mobileMenu}
              onClick={() => {
                this.phoneClick();
              }}
            >
              <em />
              <em />
              <em />
            </div>
          )}
          <TweenOne
            {...dataSource.Menu}
            animation={{ x: 30, type: 'from', ease: 'easeOutQuad' }}
            ref={(c) => {
              this.menu = c;
            }}
            style={isMobile ? { height: menuHeight, backgroundColor: 'rgba(0, 0, 0, 0.7)' } : null}
          >
            {navChildren}
          </TweenOne>
          {
            !isMobile &&
            <div className={styles.concat} style={{ display: 'inline-block', color: '#fff'}}>
               <span><i className={styles.qq}></i><a href="https://wpa.qq.com/msgrd?v=3&amp;uin=1090127630&amp;site=qq&amp;menu=yes">QQ咨询</a></span>
               <span className={styles.qrcode}><i className={styles.wechat}></i>微信咨询<img src={QRCODE} alt="" /></span>
               <span><i className={styles.phone}></i><a href="tel:18573099808">18573099808</a></span>
            </div>
          }
        </div>
      </TweenOne>
    );
  }
}

export default Header;
